<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hello World</title>
    <script src="../vue.js"></script>
    <script src="../velocity.min.js"></script>
    <style>
      .left {
        float: left;
        width: 20%;
        border: 1px black solid;
        padding: 5px;
        margin-right: 5px;
        height: 100px;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .left::after {
        content: '';
        height: 1px;
        display: block;
      }
      .middle {
        float: left;
        width: 29%;
      }
      .right {
        float: left;
        margin-left: 50px;
      }
      button {
        display: block;
        margin-top: 10px;
      }
      .middle-btn {
        float: right;
        transform: translateY(-64px);
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.5s;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="left">
        <transition-group>
          <div class="item" v-for="(item,index) of list" :key="item.id">
            Hello --- index:{{ index }} --- id:{{ item.id }}
          </div>
        </transition-group>
      </div>

      <div class="middle">
        <button @click="addItem">添加列表项</button>
        <button @click="deleteItem">删除列表项</button>
        <button class="middle-btn" @click="isShow = !isShow">
          Show Toggle
        </button>
      </div>

      <div class="right">
        <fade :show="isShow"><div>Hello World</div></fade>
        <fade :show="isShow"><h1>Hello World</h1></fade>
        <fade-with-js :show="isShow"><h2>Hello JS</h2></fade-with-js>
      </div>
    </div>
    <script>
      Vue.component('fade', {
        props: ['show'],
        template: `<transition><slot v-if="show"></slot></transition>`
      })

      Vue.component('fade-with-js', {
        props: ['show'],
        template: `<transition
                    name="other"
                    @before-enter="beforeEnter"
                    @enter="enter"
                    @leave="leave"
                    ><slot v-if="show"></slot></transition>`,
        methods: {
          beforeEnter(el) {
            el.style.opacity = 0
          },
          enter(el, done) {
            Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
          },
          leave(el, done) {
            Velocity(el, { opacity: 0 }, { duration: 500, complete: done })
          }
        }
      })

      const vm = new Vue({
        el: '#root',
        data: {
          listKey: 0,
          list: [],
          isShow: false
        },
        methods: {
          addItem() {
            this.list.push({
              id: this.listKey
            })
            this.listKey++
          },
          deleteItem() {
            this.list.pop()
          }
        }
      })
    </script>
  </body>
</html>
